<template>
	<view class="page-height">
		<i-top-bar :title="title" :back-press="true" @on-back="onBack()"> </i-top-bar>
		<view class="page-content">
			<view class="title-line">
				<text class="title">基本信息</text>
			</view>

			<view class="form-view">
				<view class="form-item form-item-col">
					<view class="form-item-row">
						<text class="xing">*</text>
						<text class="label">序列号</text>
						<view class="right ">
							<view class="select-line" @click="onSelectXlh()">
								<text class="val" v-if="xlh_active.code">{{xlh_active.code}}</text>
								<text class="val val-un" v-else>请选择</text>
								<!-- <image src="@/static/images/saomiao.png" class="select-ioc" @click.stop="scanCode()"></image> -->
								<image src="@/static/images/select.png" class="select-ioc"></image>
							</view>
							<!-- <picker class="picker-view" @change="onXlhChange" :range="xlh_list" range-key="code">
								<view class="select-line">
									<input type="text" :value="xlh_active.code" placeholder="请选择" class="input" disabled />
									<image src="@/static/images/select.png" class="select-ioc"></image>
								</view>
							</picker> -->
						</view>
					</view>
					<text class="tips">查看:设备背面信息的最后一行英文+数字,如:32GCWXXXXXXX</text>
				</view>

				<view class="form-item">
					<text class="xing">*</text>
					<text class="label">产品名称</text>
					<view class="right">
						<input type="text" v-model="product_name" placeholder="请输入" class="input" disabled />
					</view>
				</view>
				<view class="form-item form-item-col">
					<view class="form-item-row" style="align-items: flex-start;">
						<text class="xing">*</text>
						<text class="label">故障描述</text>
						<view class="right-textarea">
							<textarea placeholder="请输入" v-model="user_content" class="textarea"></textarea>
						</view>
					</view>

					<text class="tips">请简单描述问题,如:开不了机、开机无声音、点读无声音等等</text>
				</view>
				<view class="form-item form-item-col">
					<view class="form-item-row" style="align-items: flex-start;">
						<!-- <text class="xing">*</text> -->
						<text class="label">备注</text>
						<view class="right-textarea">
							<textarea placeholder="请输入" v-model="remarks" class="textarea"></textarea>
						</view>
					</view>

				</view>

			</view>
			<text class="tips-text">没有找到序列号？<text class="tips-text-active" @click="onbShowImage()">点击查看示意图</text></text>

			<view class="title-line">
				<text class="title">购买渠道</text>
			</view>

			<view class="form-view">
				<view class="form-item">
					<text class="xing">*</text>
					<text class="label">购买渠道</text>
					<view class="right">
						<picker class="picker-view" @change="onQdChange" :range="qd_list" range-key="name">
							<view class="select-line">
								<input type="text" :value="qd_active.name" placeholder="请选择" class="input" disabled />
								<image src="@/static/images/select.png" class="select-ioc"></image>
							</view>
						</picker>

					</view>
				</view>
				<view class="form-item">
					<text class="xing">*</text>
					<text class="label" style="width: 230rpx;">实际购买店铺名称</text>
					<view class="right">
						<input type="text" v-model="shop_name" placeholder="请输入" class="input" />
					</view>
				</view>
				<view class="form-item">
					<text class="xing">*</text>
					<text class="label" style="width: 200rpx;">实际购买时间</text>
					<view class="right">
						<picker class="picker-view" mode="date" @change="onTimeChange" :end="end">
							<view class="select-line">
								<input type="text" :value="buy_date" placeholder="请选择" class="input" disabled />
								<image src="@/static/images/select.png" class="select-ioc"></image>
							</view>
						</picker>

					</view>
				</view>
				<view class="form-item">
					<text class="xing">*</text>
					<text class="label">订单编号</text>
					<view class="right">
						<input type="text" v-model="order_code" placeholder="请输入" class="input" />
					</view>
				</view>
				<view class="form-item">
					<text class="xing">*</text>
					<text class="label">订单截图</text>
					<view class="right-images">
						<view class="image-item" v-if="order_image">
							<image :src="getImageSrc(order_image)" mode="aspectFill" class="image"></image>
							<image src="@/static/images/del.png" class="del-ioc" @click="order_image = ''"></image>
						</view>
						<view class="image-item" @click="onChooseImage('order_image')" v-else>
							<image src="@/static/images/upload.png" mode="aspectFill" class="select-ioc"></image>
						</view>
						<text class="tips">需截图到订单编号、下单时间</text>
					</view>
				</view>

			</view>
			<view class="title-line title-line-col">
				<view class="line">
					<text class="xing">*</text>
					<text class="title">故障说明</text>
				</view>
				<text class="title-sub">请上传一个问题视频+设备背面照片，让我们更好的为您解决问题</text>
			</view>

			<view class="upload-images">
				<text class="image-size">（{{image_list.length}}/9）</text>
				<!-- <scroll-view scroll-x="true" class="scroll-view"> -->
				<view class="image-list">
					<view class="image-item" v-for="(item,index) in image_list" :key="index">

						<image :src="getImageSrc(item)" mode="aspectFill" class="img" v-if="item && getFileType(item) ==='image'"></image>
						<image src="@/static/images/video.png" mode="aspectFill" class="img" v-if="item && getFileType(item) ==='video'" @click="openVideo(item)"></image>
						<image src="@/static/images/del.png" class="del-ioc" v-if="item" @click="onDelItem(index)"></image>
					</view>
					<view class="image-item" v-if="image_list.length < 9">
						<image src="@/static/images/upload.png" mode="aspectFill" class="img" @click="$refs.select_image.show('image_list',9-image_list.length)"></image>
					</view>

				</view>
				<!-- </scroll-view> -->
			</view>

			<view class="title-line">
				<text class="xing">*</text>
				<text class="title">寄回地址</text>
				<text class="title-sub">我们会根据您的地址寄回产品</text>
			</view>

			<view class="address-view">
				<view class="address-empty" v-if="address_length === 0">
					<view class="line">
						<image src="@/static/images/address.png" class="ioc"></image>
						<text class="text">您的地址库暂无地址信息</text>
					</view>
					<view class="add-btn" @click="$refs.add_address.show()">
						<image src="@/static/images/add.png" class="add-ioc"></image>
						<text class="add-text">添加地址</text>
					</view>
				</view>
				<view class="address-info" v-else>
					<view class="info" v-if="address.id">
						<text class="address-text">{{address.receiver}} {{address.mobile}}</text>
						<text class="address-text">{{address.address}}</text>
					</view>
					<view class="add-btn" @click="openWin('/pages/user/address?type=select')">
						<text class="add-text">选择地址</text>
					</view>
				</view>
			</view>

			<view class="btn-view">
				<button class="btn" @click="onSubmit()">提 交</button>
			</view>


		</view>
		<u-toast ref="uToast"></u-toast>
		<i-toast ref="iToast"></i-toast>
		<select-image ref="select_image" @select="onChooseImageSuccess"></select-image>
		<confirm ref="quit" content="退出将不会保存您的修改\n是否退出？" @confirm="goBack()"></confirm>
		<confirm ref="submit" content="是否确认提交工单?" @confirm="confirmSubmit()"></confirm>
		<confirm ref="edit_submit" content="是否确认修改并提交工单?" @confirm="confirmEdit()"></confirm>
		<add-address ref="add_address" @seccess="addAddressSuccess"></add-address>

		<!-- 选择序列号 -->
		<select-xlh ref="select_xlh" :list="xlh_list" @confirm="onXlhChange"></select-xlh>

		<rule-dialog class="rule-dialog" ref="rule_dialog" @confirm="ruleConfirm()"></rule-dialog>

	</view>
</template>
<script>
	import SelectImage from "./components/select-image.vue"
	import AddAddress from "@/pages/user/components/add-address.vue"
	import SelectXlh from "./components/select-xlh.vue" //选择序列号
	import colorGradient from "../../uni_modules/uview-ui/libs/function/colorGradient";
	import ruleDialog from "./components/rule-dialog.vue";
	export default {
		components: { SelectImage, AddAddress, SelectXlh, ruleDialog },
		data() {
			return {
				id: null,
				title: "新建工单",
				address_length: 0,
				address: {
					id: null,
					address: "",
					receiver: "",
					mobile: "",
				},
				qd_list: [],
				qd_active: { id: null, name: "" },
				buy_date: "",

				xlh_active: { id: null, code: null },
				order_image: "", //订单截图
				image_list: [],

				product_name: "",
				user_content: "", //用户说明
				remarks: "", //备注

				shop_name: "", //店铺名称
				order_code: "", //订单编号

				xlh_list: [],

			};
		},
		async onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.title = "重新提交"
				this.getOrderDetail()
			}
			this.bindWechat() //绑定微信
			this.getChannelList() //获取渠道列表
			this.getAddress()
			this.getXlhList() //获取产品码列表
		},
		mounted() {
			uni.$on("select-address", (address) => {
				this.address = address
			})
			uni.$on("rule-confirm", () => {
				if (this.id) {
					this.$refs.edit_submit.show()
				} else {
					this.$refs.submit.show()
				}
			})
		},
		onUnload() {
			uni.$off("select-address")
			uni.$off("rule-confirm")
		},
		computed: {
			get_image_length: function() {
				const ac = this.image_list.filter((e) => e)
				return ac.length
			},
			end: function() {
				const timer = new Date().getTime();
				return this.formatTime(timer, "Y-M-D")
			}
		},
		methods: {
			getOrderDetail() {
				const params = {
					id: this.id
				}
				this.api.post("/api/work/workDetails", { params: params }).then(res => {
					this.qd_active = {
						id: res.channel_id,
						name: res.channel_name
					}
					this.remarks = res.remarks
					this.user_content = res.user_content
					this.shop_name = res.shop_name
					this.order_code = res.order_code
					if (res.real_pay_time) {
						this.buy_date = this.formatTime(res.real_pay_time, 'Y-M-D')
					}
					this.order_image = res.order_image
					if (res.image) {
						this.image_list = res.image.split(',')
					}

					if (res.product_id) {
						this.xlh_active = {
							id: res.product_id,
							code: res.product_code
						}
						this.getGoodsName()
					}


					this.address = {
						id: res.address_id,
						address: res.res_address,
						receiver: res.res_receiver,
						mobile: res.res_mobile,
					}
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			//绑定微信
			async bindWechat() {
				const params = {
					code: await this.getLoginCode()
				}
				this.api.post("/api/user/getCode", { params: params }).then(res => {
					console.log("绑定微信成功");
				}).catch(err => {
					console.log("绑定微信失败");
				}).finally(() => {
					this.loadingHide();
				})
			},
			getXlhList() {
				return new Promise((resolve) => {
					this.api.post("/api/work/productList").then(res => {
						this.xlh_list = res
					}).catch(err => {
						this.apiErr(err)
					}).finally(() => {
						resolve()
						this.loadingHide();
					})
				})
			},


			//获取是否设置过地址
			getAddress() {

				return new Promise((resolve) => {
					this.api.post("/api/address/index").then(res => {
						this.address_length = res.length
						if (this.address_length === 1) {
							this.address = res[0]
						}
					}).catch(err => {
						this.apiErr(err)
					}).finally(() => {
						this.loadingHide();
						resolve()
					})
				})
			},
			getChannelList() {
				return new Promise((resolve) => {
					this.api.post("/api/work/channelList").then(res => {
						this.qd_list = res
					}).catch(err => {
						this.apiErr(err)
					}).finally(() => {
						resolve()
						this.loadingHide();
					})
				})
			},
			onBack() {
				this.$refs.quit.show()
			},

			//选择图片
			onChooseImage(type) {
				uni.chooseMedia({
					mediaType: ['image'],
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						this.loadingShow("上传中")
						const path = res.tempFiles[0]
						const { url } = await this.uploadFile(path.tempFilePath)
						this[type] = url
						this.loadingHide();
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			onChooseImageSuccess(res) {
				if (res.name === 'order_image') {
					this.order_image = res.paths[0]
				} else {
					this.image_list = [...this.image_list, ...res.paths]
					// const arr = res.name.split('_');
					// this.$set(this.image_list, arr[1], res.path)

					// this.image_list[Number(arr[1])] = res.path
				}

			},
			//删除图片
			onDelItem(index) {
				this.image_list.splice(index, 1)
				// this.$set(this.image_list, index, "")
			},
			onQdChange(e) {
				this.qd_active = this.qd_list[e.detail.value]
			},
			//选择产品序列号
			onXlhChange(e) {
				this.xlh_active = e
				this.getGoodsName()
			},
			//获取产品名称
			getGoodsName() {
				const params = {
					id: this.xlh_active.id
				}
				console.log("获取产品名称", params);
				this.api.post("/api/work/getDate", { params: params }).then(res => {

					this.product_name = res.product_name ? res.product_name : ""
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			onSubmit() {
				if (!this.xlh_active.id) return this.fail("请输入选择序列号")
				if (!this.user_content) return this.fail("请输入故障描述")
				if (!this.qd_active.id) return this.fail("请选择购买渠道")
				if (!this.shop_name) return this.fail("请输入店铺名称")
				if (!this.buy_date) return this.fail("请选择实际购买时间")
				if (!this.order_code) return this.fail("请输入订单编号")
				if (!this.order_image) return this.fail("请上传订单截图")
				if (!this.address.id) return this.fail("请选择寄回地址")
				if (this.image_list.length < 1) return this.fail("请上传一个问题视频+设备背面照片")
				// this.openWin('/pages/order/rule')
				// this.$refs.rule_dialog.show()

				if (this.id) {
					this.$refs.edit_submit.show()
				} else {
					this.$refs.submit.show()
				}
			},
			ruleConfirm() {
				if (this.id) {
					this.$refs.edit_submit.show()
				} else {
					this.$refs.submit.show()
				}
			},
			requestSubscribeMessage(tmplIds) {
				return new Promise((resolve, reject) => {

					uni.requestSubscribeMessage({
						tmplIds: tmplIds,
						success: () => {
							console.log("订阅成功");
						},
						fail: (err) => {
							console.log("订阅失败", err);
						},
						complete: () => {
							resolve(true)
						}
					})
				})

			},

			async confirmSubmit() {
				const tmplIds = [];
				tmplIds.push('kJkr4_X8Lc8t1I5Roi1UBoq6X7UZReE56ld2edI-Crc') //售后状态通知
				tmplIds.push('NQjMt96kG2psYBI5G1LnO3_90kdgPsKlTUUIsZq6x4M') //发货提醒
				tmplIds.push('EgwoVCxZC2at6XqTeoJqXq5BJnoyp-W_xjwbcAWyd3k') // 申请结果
				await this.requestSubscribeMessage(tmplIds)

				const real_pay_time = Math.floor(new Date(this.buy_date).getTime() / 1000)
				const params = {
					product_id: this.xlh_active.id,
					user_content: this.user_content,
					remarks: this.remarks,
					channel_id: this.qd_active.id,
					shop_name: this.shop_name, //店铺名称
					order_code: this.order_code, //订单编号
					real_pay_time: real_pay_time,
					order_image: this.order_image,
					image: "",
					address_id: this.address.id,

				}
				const images = [];
				this.image_list.forEach((e) => {
					if (e) images.push(e)
				})

				if (images.length) params.image = images.join(',')
				console.log("提交工单", params);
				this.api.post("/api/work/workAdd", { params: params }).then((res) => {
					console.log("工单提交成功", res);
					uni.$emit("order-get-data")

					// uni.showModal({
					// 	title: "提交成功",
					// 	content: "到“我的工单”里看看吧",
					// 	showCancel: false,
					// 	success: () => {
					// 		const tmplIds = [];
					// 		tmplIds.push('sOpB_Xk_zKFLlX-fgXjyVwaAHxkcE_paCTaLCjs0WWs') //驳回通知
					// 		this.requestSubscribeMessage(tmplIds)
					// 		uni.switchTab({
					// 			url: "/pages/order/index"
					// 		})
					// 	}
					// })
					
					
					uni.showModal({
						title: "提交成功",
						content: "寄回时请写一张小纸条（姓名、电话、地址、问题）如没有，不利于工程师排查。\r\n请单独邮寄商品，配件一律不要寄回，如:盒子、保护套、数据线等，以免配件丢失！如出现丢失,责任自付。",
						showCancel: false,
						success: () => {
							const tmplIds = [];
							tmplIds.push('sOpB_Xk_zKFLlX-fgXjyVwaAHxkcE_paCTaLCjs0WWs') //驳回通知
							this.requestSubscribeMessage(tmplIds)
							uni.switchTab({
								url: "/pages/order/index"
							})
						}
					})


					// this.$refs.iToast.show("提交成功", "到“我的工单”里看看吧")
					// setTimeout(async () => {
					// 	const tmplIds = [];
					// 	tmplIds.push('sOpB_Xk_zKFLlX-fgXjyVwaAHxkcE_paCTaLCjs0WWs') //驳回通知
					// 	this.requestSubscribeMessage(tmplIds)
					// 	uni.switchTab({
					// 		url: "/pages/order/index"
					// 	})
					// }, 1200)

				}).catch(err => {
					console.log("errerr", err);
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			async confirmEdit() {
				const tmplIds = [];
				tmplIds.push('kJkr4_X8Lc8t1I5Roi1UBoq6X7UZReE56ld2edI-Crc') //售后状态通知
				tmplIds.push('NQjMt96kG2psYBI5G1LnO3_90kdgPsKlTUUIsZq6x4M') //发货提醒
				tmplIds.push('EgwoVCxZC2at6XqTeoJqXq5BJnoyp-W_xjwbcAWyd3k') // 申请结果
				await this.requestSubscribeMessage(tmplIds)

				const real_pay_time = Math.floor(new Date(this.buy_date).getTime() / 1000)
				const params = {
					id: this.id,
					product_id: this.xlh_active.id,
					user_content: this.user_content,
					remarks: this.remarks,
					channel_id: this.qd_active.id,
					shop_name: this.shop_name, //店铺名称
					order_code: this.order_code, //订单编号
					real_pay_time: real_pay_time,
					order_image: this.order_image,
					image: "",
					address_id: this.address.id,

				}
				const images = [];
				this.image_list.forEach((e) => {
					if (e) images.push(e)
				})

				if (images.length) params.image = images.join(',')
				console.log("提交修改工单", params);
				this.api.post("/api/work/workEdit", { params: params }).then((res) => {
					console.log("工单修改提交成功", res);
					uni.$emit("order-get-data")
					
					uni.showModal({
						title: "提交成功",
						content: "寄回时请写一张小纸条（姓名、电话、地址、问题）如没有，不利于工程师排查。\r\n请单独邮寄商品，配件一律不要寄回，如:盒子、保护套、数据线等，以免配件丢失！如出现丢失,责任自付。",
						showCancel: false,
						success: () => {
							const tmplIds = [];
							tmplIds.push('sOpB_Xk_zKFLlX-fgXjyVwaAHxkcE_paCTaLCjs0WWs') //驳回通知
							this.requestSubscribeMessage(tmplIds)
							uni.switchTab({
								url: "/pages/order/index"
							})
						}
					})
					
					
					// uni.showModal({
					// 	title: "提交成功",
					// 	content: "到“我的工单”里看看吧",
					// 	showCancel: false,
					// 	success: () => {
					// 		const tmplIds = [];
					// 		tmplIds.push('sOpB_Xk_zKFLlX-fgXjyVwaAHxkcE_paCTaLCjs0WWs') //驳回通知
					// 		this.requestSubscribeMessage(tmplIds)
					// 		uni.switchTab({
					// 			url: "/pages/order/index"
					// 		})
					// 	}
					// })
					// this.$refs.iToast.show("提交成功", "到“我的工单”里看看吧")
					// setTimeout(async () => {
					// 	const tmplIds = [];
					// 	tmplIds.push('sOpB_Xk_zKFLlX-fgXjyVwaAHxkcE_paCTaLCjs0WWs') //驳回通知
					// 	this.requestSubscribeMessage(tmplIds)
					// 	uni.switchTab({
					// 		url: "/pages/order/index"
					// 	})
					// }, 1200)

				}).catch(err => {
					console.log("errerr", err);
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			//添加了地址
			addAddressSuccess() {
				console.log("添加了地址");
				this.getAddress()
			},
			//选择了购买时间
			onTimeChange(e) {
				this.buy_date = e.detail.value
			},
			//打开视频
			openVideo(src) {
				this.openWin(`/pages/order/video?src=${src}`)
			},
			//选择序列号
			onSelectXlh() {
				this.$refs.select_xlh.show()
			},
			//扫码序列号
			scanCode() {
				wx.scanCode({
					success: (res) => {

						const active = this.xlh_list.filter((e) => e.code == res.result)
						if (active.length) {
							this.xlh_active = active[0]
							this.getGoodsName()
						} else {
							this.fail("未查询到该序列号")
						}
					},
					fail: () => {
						this.fail("识别失败")
					}
				})

			},
			//查看示意图
			onbShowImage() {
				this.api.post("/api/index/shiyi").then(res => {
					const image = res
					this.showImg([image], 0)
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding-bottom: 20rpx;
	}

	.title-line {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;

		.xing {
			font-size: 28rpx;
			color: #FF3300;
			transform: translateY(2rpx);
			margin-right: 4rpx;
		}

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.title-sub {
			flex: 1;
			font-size: 20rpx;
			color: #666666;
			margin-left: 16rpx;
		}
	}

	.title-line-col {
		flex-direction: column;
		align-items: flex-start;

		.title-sub {
			margin-left: 0;
			margin-top: 4rpx;
		}
	}

	.form-view {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx;

		.form-item {
			display: flex;
			border-bottom: 1px solid #E5E5E5;
			padding: 24rpx 0;

			.form-item-row {
				display: flex;
				align-items: center;
			}

			.xing {
				line-height: 66rpx;
				font-size: 28rpx;
				color: #FF3300;
				transform: translateY(2rpx);
			}

			.label {
				line-height: 66rpx;
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
				padding-left: 4rpx;
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				height: 66rpx;
				padding-left: 24rpx;

				.picker-view {
					width: 100%;
					position: relative;
					z-index: 1;
				}

				.select-line {
					display: flex;
					align-items: center;
					flex: 1;
					height: 66rpx;

					.val {
						flex: 1;
						color: #000000;
						font-size: 26rpx;
					}

					.val-un {
						color: #999999;
					}
				}

				.input {
					flex: 1;
				}

				.select-ioc {
					width: 26rpx;
					height: 26rpx;
					margin-left: 10rpx;
				}
			}

			.tips {
				font-size: 22rpx;
				color: #333333;
				margin-top: 20rpx;
				text-align: right;
			}

			.right-textarea {
				position: relative;
				border: 1px solid #E6E6E6;
				border-radius: 10rpx;
				flex: 1;
				padding: 16rpx 24rpx;

				.textarea {
					width: 100%;
					height: 190rpx;
					font-size: 28rpx;
				}

				.text-num {
					position: absolute;
					bottom: 12rpx;
					right: 12rpx;
					font-size: 28rpx;
					color: #999999;

				}
			}

			.right-images {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;

				.image-item {
					position: relative;
					width: 144rpx;
					height: 156rpx;
					border-radius: 16rpx;

					.select-ioc {
						width: 100%;
						height: 100%;
					}

					.image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}

					.del-ioc {
						position: absolute;
						top: 0;
						right: 0;
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}

		.form-item-col {
			flex-direction: column;
		}

		.form-item:last-child {
			border-bottom: none;
		}
	}

	.tips-text {
		margin-left: auto;
		font-size: 24rpx;
		color: #333333;
		margin-top: 20rpx;
		margin-right: 30rpx;

		.tips-text-active {
			color: #55C29A;
		}
	}

	.upload-images {
		position: relative;
		display: flex;
		background-color: #ffffff;
		padding: 40rpx 30rpx;

		.image-size {
			position: absolute;
			top: 10rpx;
			right: 0rpx;
			font-size: 20rpx;
			color: #666666;
		}

		.scroll-view {
			white-space: nowrap
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;


			.image-item {
				position: relative;
				display: inline-block;
				width: 144rpx;
				height: 156rpx;
				border-radius: 16rpx;
				margin-right: 34rpx;
				margin-top: 32rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

				.del-ioc {
					position: absolute;
					top: 0;
					right: 0;
					width: 44rpx;
					height: 44rpx;
				}
			}

			.image-item:nth-child(4n) {
				margin-right: 0;
			}

			.image-item:nth-child(1) {
				margin-top: 0;
			}

			.image-item:nth-child(2) {
				margin-top: 0;
			}

			.image-item:nth-child(3) {
				margin-top: 0;
			}

			.image-item:nth-child(4) {
				margin-top: 0;
			}

			// .image-item:last-child {
			// 	margin-right: 0;
			// }
		}
	}

	.address-view {
		display: flex;
		flex-direction: column;
		padding: 40rpx 30rpx;
		background-color: #ffffff;

		.address-empty {
			display: flex;
			flex-direction: column;
			align-items: center;

			.line {
				display: flex;
				align-items: center;
				justify-content: center;

				.ioc {
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}

				.text {
					font-size: 26rpx;
					color: #999999;
				}
			}

			.add-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 68rpx;
				padding: 0 48rpx;
				border-radius: 100px;
				border: 1px solid #55C29A;
				margin-top: 30rpx;

				.add-ioc {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}

				.add-text {
					font-size: 28rpx;
					color: #55C29A;
				}

			}
		}

		.address-info {
			display: flex;
			flex-direction: column;

			.info {
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;

				.address-text {
					font-size: 28rpx;
					color: #333333;
					padding: 4rpx 0;
				}
			}

			.add-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 68rpx;
				padding: 0 100rpx;
				border-radius: 100px;
				border: 1px solid #55C29A;
				margin: 0rpx auto 0;


				.add-text {
					font-size: 28rpx;
					color: #55C29A;
				}

			}
		}
	}

	.btn-view {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 30rpx 60rpx;
	}

	.rule-dialog {
		position: relative;
		z-index: 9;
	}
</style>